<template>
  <div class="w-page">
    <img src="../assets/img/first/bg.png" alt="" class="w-bg">
    <img src="../assets/img/first/logo.png" alt="" class="w-logo">
    <ul class="w-ul flex hb vc">
      <li v-for="(v,i) in list" :key="i">
        <router-link :to="v.path">
          <div>
            <img :src="v.img" alt="">
            <p class="w-name">{{v.name}}</p>
          </div>
        </router-link>
      </li>
    </ul>
    <p class="w-copy">Copyright© 山西师范大学教育发展基金会</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [{
        id: 1,
        name: '简介',
        img: require('../assets/img/first/index1.png'),
        path: { path: '/introduction', query: { id: 1 } }
      },
      {
        id: 2,
        name: '领导致辞',
        img: require('../assets/img/first/index2.png'),
        path: { path: '/introduction', query: { id: 6 } }

      },
      {
        id: 3,
        name: '组织机构',
        img: require('../assets/img/first/index3.png'),
        path: { path: '/introduction', query: { id: 7 } }

      },
      {
        id: 4,
        name: '管理制度',
        img: require('../assets/img/first/index4.png'),
        path: { path: '/introduction', query: { id: 8 } }

      }
      ]
    }
  }
}
</script>

<style scoped>
  .w-page {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background: #762626;
  }

  .w-bg {
    width: 100vw;
    position: absolute;
    top: 10vh;
  }

  .w-logo {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    top: 25vw;
  }

  .w-ul {
    position: absolute;
    bottom: 18vh;
    padding: 0 30px;
  }

  .w-ul li {
    width: 25%;
  }

  .w-ul a {
    display: block;
    text-align: center;
    font-size: 13px;
    color: rgba(237, 206, 141, 1);
  }

  .w-name {
    margin-top: 4px;
  }

  .w-copy {
    position: absolute;
    text-align: center;
    bottom: 5vh;
    font-size: 11px;
    color: #AB5D60;
    width: 100%;
  }
</style>
